<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../framework/header.jsp" />
<%-- <link href="${pageContext.request.contextPath}/static/plugin/bootstrap-slider/css/slide/bootstrap-slider.css" rel="stylesheet"> --%>
<link href="${pageContext.request.contextPath}/static/plugin/bootstrap-slider/css/slide/bootstrap-slider.min.css" rel="stylesheet">

<style>

	*{
      margin: 0;
      padding: 0;
    }
    .scroll{
      width: 100%;
      height: 15px;
      background: #f7f7f7;
      position: relative;
    }
    .bar{
      width: 20px;
      height: 20px;
      border-radius:20px;
      background: #fff;
      position: absolute;
      top: -2px;
      left: 0;
      cursor: pointer;
      border:2px solid #e5e5e5;
    }
    .mask{
      position: absolute;
      left: 0;
      top: 0;
      background: #26a0f5;
      width: 0;
      height: 15px;
    }


</style>
<div id="container"
	class="effect aside-float aside-bright mainnav-lg navbar-fixed mainnav-fixed aside-fixed">

	<jsp:include page="../framework/topper.jsp" />
	<div class="boxed">
		<%--=======================  页面主体内容  ============================--%>
		<div id="content-container">
			<div class="wrappers">
				<%--=========================  页面标题  ==========================--%>
				<div id="page-title">
					<p class="page-header text-overflow">其他样式</p>
				</div>
				<ol class="breadcrumb">
					<li><a href="#">UI样式</a></li>
					<li class="active">其他样式</li>
				</ol>
				<div id="page-content">
					<div class="panel">
						<div class="panel-heading ">
							<div class="panel-title">进度条</div>
						</div>
						<div class="panel-body">
							<div class="row col-sm-12 text-center">
								<div class="for-liucheng">
									<div class="liulist for-cur"></div>
									<div class="liulist for-cur"></div>
									<div class="liulist"></div>
									<div class="liulist"></div>
									<div class="liutextbox">
										<div class="liutext for-cur">
											<em></em> <strong class="circle-progress">开始</strong>
										</div>
										<div class="liutext for-cur active">
											<em></em> <strong class="circle-progress">应用基本信息</strong>
										</div>
										<div class="liutext">
											<em></em> <strong class="circle-progress">应用配置</strong>
										</div>
										<div class="liutext">
											<em></em> <strong class="circle-progress">服务发布</strong>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="panel">
						<div class="panel-heading">
							<div class="panel-title">默认图标</div>
						</div>
						<div class="panel-body">
							<div class="row">
								<div class="col-sm-3 col-sm-offset-1">
									<img alt="image" src="static/images/two.png"
										class="img-rounded" style="width: 140px; height: 140px;">
								</div>
								<div class="col-sm-3">
									<img alt="image" src="static/images/one.png"
										class="img-circle" style="width: 140px; height: 140px;">
								</div>
								<div class="col-sm-3">
									<img alt="image" src="static/images/three.png"
										class="img-thumbnail" style="width: 140px; height: 140px;">
								</div>
							</div>
						</div>
					</div>
					<div class="panel">
						<div class="panel-heading">
							<div class="panel-title">提示色块</div>
						</div>
						<div class="panel-body">
							<div class="row col-sm-12">
								<div class="col-sm-3">
									<div class="panel panel-success panel-colorful">
					                    <div class="pad-all text-center">
					                        普通内容普通内容普通内容
					                    </div>
					                </div>
								</div>
								<div class="col-sm-3">
									<div class="panel panel-info panel-colorful">
					                    <div class="pad-all text-center">
					                        普通内容普通内容普通内容
					                    </div>
					                </div>
								</div>
								<div class="col-sm-3">
									<div class="panel panel-primary panel-colorful">
					                    <div class="pad-all text-center">
					                        普通内容普通内容普通内容
					                    </div>
					                </div>
								</div>
								<div class="col-sm-3">
									<div class="panel panel-danger panel-colorful">
					                    <div class="pad-all text-center">
					                        普通内容普通内容普通内容
					                    </div>
					                </div>
								</div>
							</div>
							<div class="row col-sm-12" style="margin-top: 20px">
								<div class="col-sm-3">
									<div class="panel panel-warning panel-colorful">
					                    <div class="pad-all text-center">
					                        普通内容普通内容普通内容
					                    </div>
					                </div>
								</div>
								<div class="col-sm-3">
									<div class="panel panel-purple panel-colorful">
					                    <div class="pad-all text-center">
					                        普通内容普通内容普通内容
					                    </div>
					                </div>
								</div>
								<div class="col-sm-3">
									<div class="panel panel-mint panel-colorful">
					                    <div class="pad-all text-center">
					                        普通内容普通内容普通内容
					                    </div>
					                </div>
								</div>
								<div class="col-sm-3">
									<div class="panel panel-dark panel-colorful">
					                    <div class="pad-all text-center">
					                        普通内容普通内容普通内容
					                    </div>
					                </div>
								</div>
							</div>
						</div>
					</div>
					<div class="panel">
						<div class="panel-heading">
							<div class="panel-title">顶部消息栏</div>
						</div>
						<div class="panel-body"
							style="padding: 30px 30px 30px 30px !important;">
							<div class="navbar-content clearfix">
								<ul class="nav navbar-top-links pull-left">
									<li class="tgl-menu-btn"><a class="mainnav-toggle"
										style="height: 40px; width: 40px" href="#"> <i
											class="cds-icon-view-list label-top"></i>
									</a></li>
									<li class="mega-dropdown"><a href="#"
										class="mega-dropdown-toggle" style="height: 40px; width: 40px">
											<i class="cds-icon-layout-grid label-top"></i>
									</a></li>

								</ul>

								<ul class="nav pull-left">
									<li id="dropdown-user "
										style="border-right: 1px solid rgba(0, 0, 0, 0.05); height: 40px;">
										<select id="regionCodeSelect" name="regionCodeSelect"
										style="font-size: 14px; margin: 10px 10px 0 10px; border-style: none; color: #26A0F5"><option
												value="001" style="color: #333" selected="">北京阿里云</option>
											<option value="005" style="color: #333">容器机房</option></select>
									</li>
								</ul>

								<ul class="nav navbar-top-links pull-right">
									<li class="dropdown"><a href="#" class="dropdown-toggle"
										style="height: 40px; width: 40px"> <i
											class="fa fa-bell-o label-top"></i>
									</a></li>

									<li id="dropdown-user" class="dropdown"><a href="#"
										data-toggle="dropdown" class="dropdown-toggle text-right">
											<span class="pull-right"> <i
												class="cds-icon-male ic-user label-top"></i>
										</span>
											<div class="username user-info hidden-xs"
												style="font-size: 14px;">
												changchang.zhang<span>管理员</span>
											</div>
									</a></li>
									<li><a href="#" class="aside-toggle navbar-aside-icon">
											<i class="pci-ver-dots"></i>
									</a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="panel">
						<div class="panel-heading">
							<div class="panel-title">顶部消息栏</div>
						</div>
						<div class="panel-body">
							<div class = "form-group">
								<div class="col-xs-6">
								 <div class="scroll" id="scroll">
								    <div class="bar" id="bar">
								 
								    </div>
								    <div class="mask" id="mask"></div>
								  </div>
	                              </div>
	                              <div class="col-xs-1" style="margin-top:-4px;">
										<div class="input-group">
											<input id="demo-range-def-val"type="text" class="form-control"/>
											<span class="input-group-addon">G</span>
										</div>
								  </div> 
							</div>
							<div class = "form-group">
								  <div class="col-xs-6">
								  		
	                              </div>
	                              <div class="col-xs-1" style="margin-top:-4px;">
									<div class="input-group">
										<input id="demo-range-def-val"type="text" class="form-control"/>
										<span class="input-group-addon">G</span>
									</div>
								  </div> 
							</div>
						</div>
					</div>
				</div>
			</div>

			<%--=========================  过程可视化消息栏  ==========================--%>
			<jsp:include page="../framework/aside.jsp" />

			<%--=========================  左侧菜单  ==========================--%>
			<jsp:include page="../framework/lefter.jsp" />

		</div>

		<%--=========================  页面底部版权信息  ==========================--%>
		<jsp:include page="../framework/footer.jsp" />
		<%--=========================  选择皮肤功能  ==========================--%>
		<jsp:include page="../framework/page-set.jsp" />
	</div>
</div>
<div id="floating-top-right" class="floating-container"></div>
<%--===================================================--%>
<%-- END OF CONTAINER --%>

<jsp:include page="../framework/script.jsp" />
<script	src="${pageContext.request.contextPath}/static/plugin/bootstrap-slider/js/slide/bootstrap-slider.min.js"></script>
<%-- <script	src="${pageContext.request.contextPath}/static/plugin/bootstrap-slider/js/slide/bootstrap-slider.js"></script> --%>
<script src="${pageContext.request.contextPath}/static/js/common/jquery.steps.min.js"></script>
<script	src="${pageContext.request.contextPath}/static/plugin/bootstrap-slider/js/slide/jquery-2.2.4.min.js"></script>

<script type="text/javascript">


var scroll = document.getElementById('scroll');
var bar = document.getElementById('bar');
var mask = document.getElementById('mask');
var ptxt = document.getElementsByTagName('p')[0];
var barleft = 0;
bar.onmousedown = function(event){
  var event = event || window.event;
  var leftVal = event.clientX - this.offsetLeft;
  var that = this;
   // 拖动一定写到 down 里面才可以
  document.onmousemove = function(event){
    var event = event || window.event;
    barleft = event.clientX - leftVal;     
    if(barleft < 0)
      barleft = 0;
    else if(barleft > scroll.offsetWidth - bar.offsetWidth)
      barleft = scroll.offsetWidth - bar.offsetWidth;
    mask.style.width = barleft +'px' ;
    that.style.left = barleft + "px";
    ptxt.innerHTML =  parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth) * 100);
	$("#demo-range-def-val").val(ptxt.innerHTML);
    //防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  }

}
  document.onmouseup = function(){
  document.onmousemove = null; //弹起鼠标不做任何操作
}

</script>
</body>
</html>

